
<!doctype html>
<html lang="en">
<head><meta name="generator" content="Hexo 3.9.0">
    <title>input 输入框 — Feui</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="icon" href="/docs/images/favicon.ico" type="image/x-icon">
    <!--[if lte IE 9]>
      <meta http-equiv="refresh" content="0;url=https://ifuyuan.wang/browser/">
    <![endif]-->
    <title>Feui</title>
    <link rel="stylesheet" href="/docs/./css/style.css">
    <script>window.PAGE_TYPE = "guide"</script>
</head>

<a href="https://github.com/zoeblow/feui" target="_blank" class="github-corner" aria-label="View source on Github"><svg width="60" height="60" viewbox="0 0 250 250" style="fill:#41b883; color:#fff; position: fixed; top: 0; border: 0; right: 0;z-index: 99;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a>
<div id="progress"></div>
<body class="docs">
    <div id="header">
  <a id="logo" href="/docs/">
    <img src="/docs/images/logo.png">
    <span>Feui</span>
  </a>
  <button id="mobile">
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>  
  <ul id="nav">
    <li><a href="/docs/feui/guide/" class="nav-link current">教程</a></li>
<li><a href="https://feui.gitee.io">示例</a></li>
<li><a href="/docs/feui/guide/team.html" class="nav-link team">Team</a></li>
  </ul>
</div>
    
      <div id="main" class="fix-sidebar">
        <div class="main-content">
          
            <button id="mobile2">
  <span class="btn-bar"></span>
  <span class="btn-bar"></span>
  <span class="btn-bar"></span>
</button>  
<div id="mask"></div>

  <div class="sidebar" id="sidebar">
  <div class="sidebar-inner">
    <ul class="main-menu">
      <li><a href="/docs/feui/guide/" class="nav-link current">教程</a></li>
<li><a href="https://feui.gitee.io">示例</a></li>
<li><a href="/docs/feui/guide/team.html" class="nav-link team">Team</a></li>
    </ul>
    <div class="list">
      <ul class="menu-root">
  
    
    
      
        <li><a class="title-18">开发指南</a></li>
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/index.html" class="sidebar-link">Feui介绍</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/quickstart.html" class="sidebar-link">快速上手</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/readme.html" class="sidebar-link">开发指北</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/changelog.html" class="sidebar-link">更新日志</a>
    </li>
  
    
    
      
      
        <li><a class="title-18">组件系统</a></li>
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/component.html" class="sidebar-link">组件系统文档规则</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/forms.html" class="sidebar-link">文档格式</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/demo.html" class="sidebar-link">栗子 Demo</a>
    </li>
  
    
    
      
      
      
      
        <li><a class="title-16">基础组件</a></li>
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/badge.html" class="sidebar-link">Badge 徽章</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/button.html" class="sidebar-link">Button 按钮</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/count.html" class="sidebar-link">Count 累加器</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/header.html" class="sidebar-link">Header 头部</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/icon.html" class="sidebar-link">Icons 图标</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/qrcode.html" class="sidebar-link">QRcode 二维码</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/range.html" class="sidebar-link">Range 滑块</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/rater.html" class="sidebar-link">Rater 评价</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/search.html" class="sidebar-link">Search 搜索框</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/steps.html" class="sidebar-link">Steps 步骤条</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/tab.html" class="sidebar-link">Tab 标签栏</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/tabber.html" class="sidebar-link">Tabbar 底部标签</a>
    </li>
  
    
    
      
      
      
      
      
        <li><a class="title-16">表单组件</a></li>
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/address.html" class="sidebar-link">Address 地址栏</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/cell.html" class="sidebar-link">Cell 单元格</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/checkicon.html" class="sidebar-link">Checkicon 单选按钮</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/checker.html" class="sidebar-link">Checker 选择按钮</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/checklist.html" class="sidebar-link">Checklist 按钮组</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/countup.html" class="sidebar-link">Countup 数字滚动</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/flexbox.html" class="sidebar-link">Flexbox 弹性布局</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/indexlist.html" class="sidebar-link">Indexlist 分类列表</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/inlinecalendar.html" class="sidebar-link">inlineCalendar 日历组件</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/input.html" class="sidebar-link current">input 输入框</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/lazyload.html" class="sidebar-link">Lazyload 懒加载</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/noticebar.html" class="sidebar-link">Noticebar 通知栏</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/pullrefresh.html" class="sidebar-link">Pullrefresh 刷新加载</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/radio.html" class="sidebar-link">Radio 单选按钮</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/switch.html" class="sidebar-link">Switch 开关</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/textarea.html" class="sidebar-link">Textarea 文本域</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/keyboard.html" class="sidebar-link">Keyboard 键盘</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/pwdinput.html" class="sidebar-link">Pwdinput 密码输入框</a>
    </li>
  
    
    
      
      
      
      
      
      
        <li><a class="title-16">反馈组件</a></li>
      
    
    
    <li>
      <a href="/docs/feui/guide/component/actionsheet.html" class="sidebar-link">Actionsheet 地址栏</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/datetime.html" class="sidebar-link new">Datetime 日期</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/dialog.html" class="sidebar-link">Dialog 弹窗</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/loading.html" class="sidebar-link">Loading 加载中</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/picker.html" class="sidebar-link">Picker 选择</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/popup.html" class="sidebar-link">Popup 弹出</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/popuppicker.html" class="sidebar-link">PopupPicker 弹出选择</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/scroll.html" class="sidebar-link">Scroll 滑动加载</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/slidbtn.html" class="sidebar-link">Slidbtn 滑动操作</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/swiper.html" class="sidebar-link">Swiper 滑动操作</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/toast.html" class="sidebar-link">Toast 提示</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/uploader.html" class="sidebar-link">Uploader 上传</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/imgpreview.html" class="sidebar-link">ImgPreview 图片预览</a>
    </li>
  
    
    
      
      
      
        <li><a class="title-18">Team</a></li>
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/team.html" class="sidebar-link">Team</a>
    </li>
  
</ul>

    </div>
  </div>
</div>



<div id="content" class="content guide with-sidebar input-guide">
  <div class="content_box">
    
      <h1>input 输入框</h1>
    
    <div id="pContent">
      <p><a href="https://feui.gitee.io/#/input">Live Demo&gt;&gt;</a></p>
<blockquote>
<p><code>fe-cell</code> 请在<code>fe-group</code>中使用。<br>如果你想实现在输入框右边按钮切换密码明文，请使用<code>slot=right</code>实现<code>type</code>切换。<br><code>vanilla-masker</code>如果找不到请自己安装一下。</p>
</blockquote>
<h3 id="使用指南"><a href="#使用指南" class="headerlink" title="使用指南"></a>使用指南</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Input &#125; <span class="keyword">from</span> <span class="string">'feui'</span>;</span><br><span class="line"></span><br><span class="line">components: &#123;</span><br><span class="line">  [Input.name]: Input</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="代码演示"><a href="#代码演示" class="headerlink" title="代码演示"></a>代码演示</h3><h4 id="基础用法"><a href="#基础用法" class="headerlink" title="基础用法"></a>基础用法</h4><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">fe-group</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-input</span> <span class="attr">title</span>=<span class="string">'value'</span> <span class="attr">v-model</span>=<span class="string">"value"</span> <span class="attr">placeholder</span>=<span class="string">"我是占位符"</span>&gt;</span><span class="tag">&lt;/<span class="name">fe-input</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">fe-group</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="不可用状态"><a href="#不可用状态" class="headerlink" title="不可用状态"></a>不可用状态</h4><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">fe-group</span> <span class="attr">title</span>=<span class="string">"不可用状态"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-input</span> <span class="attr">title</span>=<span class="string">'value'</span> <span class="attr">disabled</span> <span class="attr">v-model</span>=<span class="string">"disabledValue"</span>&gt;</span><span class="tag">&lt;/<span class="name">fe-input</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">fe-group</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="设置最大值最小值"><a href="#设置最大值最小值" class="headerlink" title="设置最大值最小值"></a>设置最大值最小值</h4><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">fe-group</span> <span class="attr">title</span>=<span class="string">"set min=2 and max=5"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-input</span> <span class="attr">title</span>=<span class="string">"2-5个字符"</span> <span class="attr">placeholder</span>=<span class="string">""</span> <span class="attr">:min</span>=<span class="string">"2"</span> <span class="attr">:max</span>=<span class="string">"5"</span>&gt;</span><span class="tag">&lt;/<span class="name">fe-input</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">fe-group</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="设置is-type属性"><a href="#设置is-type属性" class="headerlink" title="设置is-type属性"></a>设置<code>is-type</code>属性</h4><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">fe-group</span> <span class="attr">title</span>=<span class="string">"请输入姓名"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-input</span> <span class="attr">title</span>=<span class="string">"姓名"</span> <span class="attr">name</span>=<span class="string">"username"</span> <span class="attr">placeholder</span>=<span class="string">"请输入姓名"</span> </span></span><br><span class="line"><span class="tag">    <span class="attr">is-type</span>=<span class="string">"china-name"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">fe-input</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">fe-group</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">fe-group</span> <span class="attr">title</span>=<span class="string">"设置 keyboard=number,is-type=china-mobile"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-input</span> <span class="attr">title</span>=<span class="string">"手机号码"</span> <span class="attr">name</span>=<span class="string">"mobile"</span> <span class="attr">placeholder</span>=<span class="string">"请输入手机号码"</span> </span></span><br><span class="line"><span class="tag">    <span class="attr">keyboard</span>=<span class="string">"number"</span> <span class="attr">is-type</span>=<span class="string">"china-mobile"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">fe-input</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">fe-group</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">fe-group</span> <span class="attr">title</span>=<span class="string">"set is-type=email"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-input</span> <span class="attr">title</span>=<span class="string">"邮箱"</span> <span class="attr">name</span>=<span class="string">"email"</span> <span class="attr">placeholder</span>=<span class="string">"请输入邮箱地址"</span> </span></span><br><span class="line"><span class="tag">    <span class="attr">is-type</span>=<span class="string">"email"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">fe-input</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">fe-group</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">fe-group</span> <span class="attr">title</span>=<span class="string">"is-type传入function"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-input</span> <span class="attr">title</span>=<span class="string">"输入验证"</span> <span class="attr">:is-type</span>=<span class="string">"be2333"</span> <span class="attr">placeholder</span>=<span class="string">"必须输入2333"</span>&gt;</span><span class="tag">&lt;/<span class="name">fe-input</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">fe-group</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="不显示清除按钮"><a href="#不显示清除按钮" class="headerlink" title="不显示清除按钮"></a>不显示清除按钮</h4><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">fe-group</span> <span class="attr">title</span>=<span class="string">"不显示清除按钮"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-input</span> <span class="attr">title</span>=<span class="string">"message"</span> <span class="attr">required</span> <span class="attr">placeholder</span>=<span class="string">"我是可爱的占位符"</span> </span></span><br><span class="line"><span class="tag">    <span class="attr">:show-clear</span>=<span class="string">"false"</span> <span class="attr">autocapitalize</span>=<span class="string">"characters"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">fe-input</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">fe-group</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="使用icon代替title"><a href="#使用icon代替title" class="headerlink" title="使用icon代替title"></a>使用icon代替title</h4><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">fe-group</span> <span class="attr">title</span>=<span class="string">"使用icon代替title"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-input</span> <span class="attr">title</span>=<span class="string">"必须输入2333"</span> <span class="attr">:is-type</span>=<span class="string">"be2333"</span> <span class="attr">placeholder</span>=<span class="string">"必须输入2333"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">slot</span>=<span class="string">"label"</span> <span class="attr">style</span>=<span class="string">"padding-right:10px;display:block;"</span> </span></span><br><span class="line"><span class="tag">    <span class="attr">src</span>=<span class="string">"http://temp.im/42x42/34AADC/fff"</span> <span class="attr">width</span>=<span class="string">"24"</span> <span class="attr">height</span>=<span class="string">"24"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">fe-input</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">fe-group</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="输入格式化"><a href="#输入格式化" class="headerlink" title="输入格式化"></a>输入格式化</h4><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">fe-group</span> <span class="attr">title</span>=<span class="string">"mask"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-input</span> <span class="attr">title</span>=<span class="string">"手机号码格式化"</span> <span class="attr">mask</span>=<span class="string">"999 9999 9999"</span> </span></span><br><span class="line"><span class="tag">    <span class="attr">v-model</span>=<span class="string">"maskValue"</span> <span class="attr">:max</span>=<span class="string">"13"</span> <span class="attr">is-type</span>=<span class="string">"china-mobile"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">fe-input</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-cell</span> <span class="attr">title</span>=<span class="string">"value"</span> <span class="attr">:value</span>=<span class="string">"maskValue"</span>&gt;</span><span class="tag">&lt;/<span class="name">fe-cell</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-input</span> <span class="attr">title</span>=<span class="string">"(99) 9-999"</span> <span class="attr">mask</span>=<span class="string">"(99) 9-999"</span>  <span class="attr">v-model</span>=<span class="string">"maskValue2"</span> </span></span><br><span class="line"><span class="tag">    <span class="attr">:max</span>=<span class="string">"10"</span> <span class="attr">placeholder</span>=<span class="string">"76幢1单元305"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">fe-input</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">fe-group</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="API"><a href="#API" class="headerlink" title="API"></a>API</h3><table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
<th>可选值</th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>label文字</td>
<td><code>String</code></td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>placeholder</td>
<td>站位提示</td>
<td><code>String</code></td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>value</td>
<td>表单值，使用<code>v-model</code>绑定</td>
<td><code>String</code></td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>disabled</td>
<td>是否禁用填写</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
<td><code>false</code>,<code>true</code></td>
</tr>
<tr>
<td>type</td>
<td>input的<code>type</code>属性，目前支持 <code>text</code>,<code>number</code>,<code>email</code>,<code>password</code>,<code>tel</code></td>
<td><code>String</code></td>
<td><code>text</code></td>
<td>-</td>
</tr>
<tr>
<td>is-type</td>
<td>内置验证器，支持<code>email</code>,<code>china-name</code>,<code>china-mobile</code>,<br> 同样也支持直接传函数, 需要同步返回一个对象<code>{valid:true}</code><br>或者<code>{valid:false, msg:错误信息}</code></td>
<td><code>String</code>,<code>Function</code></td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>required</td>
<td>是否必值，如果不禁用验证，当没有填写时会在右侧显示错误icon</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
<td><code>false</code>,<code>true</code></td>
</tr>
<tr>
<td>show-clear</td>
<td>是否显示清除icon</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
<td><code>false</code>,<code>true</code></td>
</tr>
<tr>
<td>min</td>
<td>最小输入字符限制</td>
<td><code>Number</code></td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>max</td>
<td>最大输入字符限制，等同于<code>maxlength</code></td>
<td><code>Number</code></td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>debounce</td>
<td><code>debounce</code>用以限制<code>on-change</code>事件触发。如果你需要根据用户输<br>入做<code>ajax</code>请求，建议开启以节省无效请求和服务器资源，单位为毫秒</td>
<td><code>Number</code></td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>placeholder-align</td>
<td><code>placeholder</code>对其方式</td>
<td><code>String</code></td>
<td><code>left</code></td>
<td><code>left</code>,<code>right</code>,<code>center</code></td>
</tr>
<tr>
<td>text-align</td>
<td>值对齐方式</td>
<td><code>String</code></td>
<td><code>left</code></td>
<td><code>left</code>,<code>right</code>,<code>center</code></td>
</tr>
<tr>
<td>label-width</td>
<td>label 宽度，权重比 group 的 labelWidth 高</td>
<td><code>String</code></td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>mask</td>
<td>值格式化，依赖于 vanilla-masker，其中 9 表示数字，A 表示大写字母，S 表示数字或者字母</td>
<td><code>String</code></td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>should-toast-error</td>
<td>是否在点击错误图标时用 toast 的形式显示错误</td>
<td><code>Boolean</code></td>
<td><code>true</code></td>
<td><code>false</code>,<code>true</code></td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="Slots"><a href="#Slots" class="headerlink" title="Slots"></a>Slots</h3><table>
<thead>
<tr>
<th>Slot名</th>
<th>说明</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>label</td>
<td>用于自定义<code>label</code>(即 title)部分内容，比如使用<code>icon</code></td>
<td>-</td>
</tr>
<tr>
<td>restricted-label</td>
<td>用于自定义<code>label</code>部分，和<code>slot=label</code>不同的是，该slot宽度受到父组件<code>group</code>的限制</td>
<td>-</td>
</tr>
<tr>
<td>right</td>
<td>用以在输入框右边显示内容，比如验证码图片，单位，切换密码显示方式等</td>
<td>-</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="Events"><a href="#Events" class="headerlink" title="Events"></a>Events</h3><table>
<thead>
<tr>
<th>事件名</th>
<th>参数</th>
<th>说明</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>on-focus</td>
<td><code>value, $event</code></td>
<td>input的<code>focus</code>事件</td>
<td>-</td>
</tr>
<tr>
<td>on-blur</td>
<td><code>value, $event</code></td>
<td>input的<code>blur</code>事件</td>
<td>-</td>
</tr>
<tr>
<td>on-enter</td>
<td><code>value, $event</code></td>
<td>input输入完成后点击<code>enter(确认)</code>事件</td>
<td>-</td>
</tr>
<tr>
<td>on-change</td>
<td><code>value</code></td>
<td>输入值变化时触发。如果你使用了<code>debounce</code>，那么触发将不会是实时的。</td>
<td>-</td>
</tr>
<tr>
<td>on-click-error-icon</td>
<td><code>error</code></td>
<td>点击错误图标时触发</td>
<td>-</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="Methods"><a href="#Methods" class="headerlink" title="Methods"></a>Methods</h3><table>
<thead>
<tr>
<th>方法名</th>
<th>参数</th>
<th>说明</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>focus</td>
<td>-</td>
<td>手动设置<code>input</code>获得焦点</td>
<td>-</td>
</tr>
<tr>
<td>blur</td>
<td>-</td>
<td>手动设置<code>input</code>失去焦点</td>
<td>-</td>
</tr>
<tr>
<td>reset</td>
<td><code>value = &#39;&#39;</code></td>
<td>重置输入框值，清除错误信息</td>
<td>-</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>

    </div>
    
      <div class="guide-links">
        
          <span>← <a href="/docs/feui/guide/component/inlinecalendar.html">inlineCalendar 日历组件</a></span>
        
        
          <span style="float: right;"><a href="/docs/feui/guide/component/lazyload.html">Lazyload 懒加载</a> →</span>
        
      </div>
    
    <div class="footer">
      文档出现错误或者想参与贡献?
      <a href="https://gitee.com/feui/feui-hexo/blob/master/source/feui/guide/component/input.md" target="_blank">
        在Github编辑此页面!
      </a>
    </div>
  </div>
</div>

          
        </div>
      </div>
      <script src="/docs/./js/smooth-scroll.min.js"></script>
    
    <script src="/docs/./js/css.escape.js"></script>
    <script src="/docs/./js/common.js"></script>
    <script src="/docs/./js/index.js"></script>
</body>
</html>